<template>
  <CustomModal
    v-model="show"
    ref="modal"
    class="action-modal"
    :width="550"
    :title="title"
    @on-ok="actionClick"
    @on-cancel="hideModal">
    <Form
      ref="JformData"
      class="form"
      :label-width="80"
      :model="formData"
      :rules="formRules">
      <Row>
        <Col span="12">
          <CustomFormItem prop="username" label="手机号码">
            <CustomInput
              v-model="formData.username"
              placeholder="手机号码" />
          </CustomFormItem>
        </Col>
        <Col span="12">
          <CustomFormItem prop="name" label="姓名">
            <CustomInput
            v-model="formData.name"
            placeholder="姓名" />
          </CustomFormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <CustomFormItem prop="classId" label="就读班级">
            <CustomSelect
              v-model="formData.classId"
              placeholder="就读班级" />
          </CustomFormItem>
        </Col>
        <Col span="12">
          <CustomFormItem prop="birthday" label="学号">
            <CustomInput
              v-model="formData.birthday"
              placeholder="学号" />
          </CustomFormItem>
        </Col>
      </Row>
    </Form>
  </CustomModal>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { defaultMima } from 'common/js/config'
import { rules } from '../js/rules'

export default {
  computed: {
    title ({ type }) {
      return type === 'add' ? '新增用户' : '编辑用户'
    },
    isEdit ({ type }) {
      return type === 'update'
    },
    ...mapState({
      'type': state => state.user.type,
      'formInfo': state => state.user.formInfo
    })
  },
  created () {
    this.formRules = rules(this)
  },
  data () {
    return {
      formData: {},
      show: false
    }
  },
  methods: {
    initData () {
      if (this.type === 'update') {
        this.formData = JSON.parse(JSON.stringify(this.formInfo))
      } else {
        this.initFormData()
      }
    },
    initFormData () {
      this.formData = {}
      this.$refs['JformData'].resetFields()
    },
    showModal () {
      this.initData()
      this.show = true
    },
    // 关闭弹窗
    hideModal () {
      this.show = false

      setTimeout(() => {
        this.initFormData()
      }, 200)
    },
    // 触发表单保存按钮
    actionClick () {
      this.$refs.JformData.validate((val) => {
        if (val) {
          const data = JSON.parse(JSON.stringify(this.formData))

          if (this.isEdit) {
            delete data.username
            delete data.password
            delete data.createTime
          } else {
            data.password = defaultMima
          }

          this.saveData(data)
        }
      })
    },
    // 提交表单
    async saveData (data) {
      this.$refs['modal'].showLoading()

      const url = `/user/${this.type}`

      const res = await this.SUBMIT_FORM({
        listUrl: url,
        data
      })

      this.$refs['modal'].hideLoading()

      if (res) {
        this.$emit('refreshTable')
        this.hideModal()
      }
    },
    ...mapActions({
      SUBMIT_FORM: 'SUBMIT_FORM'
    })
  }
}
</script>

<style lang="scss" scoped>
.action-modal {
  .form {
    padding: 15px;
  }
}
</style>
